<template>
   <div class="home">
       <!-- sdfdergferrg -->
       <div class="demo-type">
    <div>
        <el-avatar> 统计 </el-avatar>
    </div>
    <div>
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </div>
    <div>
      <el-avatar> 用户 </el-avatar>
    </div>
        </div>
        <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in imgarr" :key="item">
       
      <h3 text="2xl" justify="center"> <img :src="item" alt=""></h3>
    </el-carousel-item>
  </el-carousel>
       <div class="box">
           <div class="tankuang">项目统计</div>
           <div class="block" v-for="(item,index) in arr" :key="index">
            <p>{{item.one}}</p>
            <p>{{item.two}}</p>
            <p>{{item.three}}</p>
            </div>

       </div>

       <div class="demo-progress">
    <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
    <el-progress
      :text-inside="true"
      :stroke-width="24"
      :percentage="100"
      status="success"
    />
    <el-progress
      :text-inside="true"
      :stroke-width="22"
      :percentage="80"
      status="warning"
    />
    <el-progress
      :text-inside="true"
      :stroke-width="20"
      :percentage="50"
      status="exception"
    />
  </div>
   </div>
</template>

<script setup>
     import { ref } from "@vue/reactivity";

     var arr = ref([
       {one:"进行中",two:"延期",three:"已完成"},
       {one:"本周报销费用",two:"未报销费用"},
       {one:"今日订餐人数",two:"今日订单成本"},
       {one:"即将到期",two:"已建合同"}
     ])


     var imgarr = ref([
        'https://img0.baidu.com/it/u=1374282253,3644141087&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=500',

'https://img0.baidu.com/it/u=157772357,2824710361&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=375',

'https://img2.baidu.com/it/u=1197512903,781794803&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=375',
'https://img0.baidu.com/it/u=2608902827,1300274731&fm=253&fmt=auto&app=138&f=JPEG?w=582&h=300'



     ])
</script>

<style scoped>

.box{
     display: flex;
     position: relative;
     
}
    .block{
        width: 25%;
        margin: 0  30px;
        height: 150px;
        /* background-color: rgb(226, 226, 226); */
        background-color:   #c6e2ff;
       /* flex-wrap: wrap; */
       border-radius: 10px;
       color: rgb(85, 84, 84);
    }


    .demo-type {
  display: flex;
  height: 80px;
}
.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  /* line-height: 200px; */
  margin: 0;
  text-align: center;
}

.el-carousel__item h3 img{
  width: 665px
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  margin-top: 20px;
  /* width: 650px; */
}
.tankuang{
    height: 30px;
    width: 80px;
    background-color: red;
    position: absolute;
    top:-15px;
   left: 50px;
    border-radius: 8px;
    color: #f5f5f5;
    text-align: center;
}
</style>